<template>
	<view class="main-cont">
		<view class="content">
			<view class="father" style="background-color: #FFFFFF; border-radius: 18px;">
				<view class="basic">
					<view class="icon">
						<u-avatar :src="icon" mode="circle" size="150"></u-avatar>
					</view>
					<view style="display: flex; justify-content: center;" class="tike">
						<view class="name">{{name}}</view>
						<view class="sel">
						  <span>老师</span> 
						</view>			
					</view>
					<view class="kha">
							<span v-for="(item,index) in list" :key="index">{{`${item.xj}${item.className}`}}\</span>
					</view>	
				</view>
			    <view class="renwu">
					<view class="leftone">
						<span>{{sjnum}}</span>
						已发布实践数
					</view>
					<view class="rightone">
						<span>{{kenum}}</span>
						课程任务数
					</view>
				</view>
				<view class="circleline">
					<u-circle-progress active-color="#A072FF" :percent="percent" width='300' border-width='25'>
							<view class="u-progress-content">
								<view class="u-progress-dot">{{percent}}%</view>
								<text class='u-progress-info'>总完成率</text>
							</view>
					</u-circle-progress>
				</view>	
				<view class="bjrw" v-if="bjrwshow==false">
								<u-collapse :head-style="headstyle" >
										<u-collapse-item title="班级劳动任务完成率">
											<view class="slot-content" style="background-color: #FFFFFF; border-radius: 0px 0px 18px 18px;">
												<scroll-view scroll-y="true" style="height: 180rpx;">
													<view class="dropitem" v-for="(j,i) in list" :key="i">
														<span>{{`${j.xj}${j.className}`}}</span>
														<view class="keshi">
															<span style="color:#00CB7B">{{j.sjrate}}%(实践)</span>
															<span style="color:#F97762">{{j.cousrate}}%(课程)</span>
														</view>
													</view>
												</scroll-view>
											</view>
										</u-collapse-item>
									</u-collapse>
				</view>	
			</view>
			<view class="">
				<u-button type="primary" open-type="share" :custom-style="customStyle">
					<image src="../../static/share.png" style="width: 48rpx; height: 48rpx;"></image>
					<span>分享</span> 
				</u-button>	
			</view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bjrwshow:false,
				headstyle:{
					color:'#798AFF'
				},
				customStyle: {
					marginTop:'40rpx',
					width: '624rpx',
					height: '86rpx',
					lineHeight: '86rpx',
					backGround: '#798AFF',
					borderRadius: '43rpx',
				},
				list:[],
				icon:'',
				name:'',
				xj:'',
				bj:'',
				sjnum:'0',
				kenum:'0',
				percent:'0',
				
	        schoolid:'',
			userid:''
				}//微信用户信息对象
			},
		onLoad: function(options) {
			//console.log(options)
			this.schoolid=options.schoolid;
			this.userid=options.userid;
			this.getdetails()
		},
		methods: {
             getdetails(){
				 let params={
					 schoolid:this.schoolid,
					 userid:this.userid
				 }
				 //console.log(params)
				  this.$api.post({url:'/dteacher/desc'},params).then(res=>{
					  //console.log(res)
					  if(res.code==0){
						  this.list=res.list;
						  this.icon=res.desc.icon;
						  this.name=res.desc.name;
						  this.sjnum=res.desc.sjcnt;
						  this.kenum=res.desc.couscnt;
						  this.percent=res.totalrate;	
                          res.list.forEach((item,index)=>{
							  //console.log(item)
							     if(item.sjrate==0 && item.cousrate==0 && item.xj=='' && item.className==''){
									 this.bjrwshow=true;
								 }else{
									 this.bjrwshow=false;
								 }
						  })
					  }
					  
				  })
			 }
			
		}
	}
</script>

<style scoped lang="scss">

  /deep/ .u-collapse-head.data-v-3bf52cdf{
	   padding: 15rpx !important;
   }
	.dropitem{
		font-size: 28rpx;
		display: flex;
		justify-content: space-around;
		>span{
			color: #181623;
			display: block;		
		}
		>.keshi{
			width: 300rpx;
			display: flex;
			justify-content: space-between;
			>span{
				display: block;
			}
		}
	}
	.bjrw{	
		line-height: 86rpx;
		font-size: 28rpx !important;
		font-family: PingFang SC;
		font-weight: 500;
		color: #626BF1;
		width: 710rpx;
		height: 86rpx;
		border-radius: 0 0 18px 18px;
		background: #F8F9FC;
		// >.rate{
		// 	display: block;
		// 	margin-left: 20rpx;
		// }

	}
	/deep/.u-circle-progress.data-v-cab6fc66{
		position: absolute;
		left: 200rpx;
		top: 20rpx;
	}

	.u-progress-content {
	       
		}
		
		.u-progress-dot {
			padding-left:30rpx;
			text-align: center;
			width: 280rpx;
			height: 60rpx;
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #626BF1;
		}
		
		.u-progress-info {
			color: #626BF1;
			width: 280rpx;
			height: 46rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 46rpx;
			padding-left: 80rpx;
		}
	.circleline{
		position: relative;
		width: 710rpx;
		height: 320rpx;
		line-height: 300rpx;
	}
	.renwu{
		font-family: PingFang SC;
		width: 710rpx;
		color: #000;
		display: flex;
		justify-content: space-around;
		>.leftone{
			font-weight: 400;
			color: #555555;
			font-size: 26rpx;
			padding: 20rpx;
			>span{
				font-family: PingFang SC;
				font-size: 40rpx;
				font-weight: 500;
				color: #00CB7B;
				text-align: center;
				display: block;
			}
		}
		>.rightone{
			font-weight: 400;
			color: #555555;
			font-size: 26rpx;
				padding: 20rpx;
			>span{
				font-family: PingFang SC;
				font-size: 40rpx;
				font-weight: 500;
				color: #00CB7B;
				text-align: center;
				display: block;
			}
		}
	}
	.basic{
		width: 710rpx;
	    text-align: center;
		color:#181623;
		margin: 0 auto;
		border-bottom: 1px solid #E5E5E5;
		>.kha{
			margin: 10rpx auto;
			color:#5F6572;
			font-size: 26rpx;
			width:300rpx;
			overflow: hidden; // 文本超出范围隐藏
			white-space: nowrap; // 文本超出范围强制不换行
			text-overflow: ellipsis; //文本超出范围显示三个点
		}
		
	}
	.tike{
		padding-top: 20rpx;
		padding-left:70rpx;
		>.name{
			font-size: 36rpx;
		}
		>.sel{
		margin-top: 10rpx;
		width: 77rpx;
		height: 36rpx;
		color:#FFFFFF;
		background: #7686F6;
		border-radius: 18px;
		
	}
	}
	
	.icon{
		font-size: 0;
		margin:  0 auto;
		margin-top: -60rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
	}
   

	.main-cont {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background: url(https://yh-sys.oss-cn-beijing.aliyuncs.com/6B9AF39796704A5CB130FC9C0CFB7A28icon_bg.png?Expires=4799124463&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=3z2ea85buEEsjoSlp5uw2FIOMoo%3D) no-repeat;
		background-size: 100%;
		color: #fff;
		background-color: #888bf3;
	}

	
</style>
